@component-namespace cs {
    @component msgbox {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      background-color: #fff;
      width: 65%;
      border-radius: toRem(10);
      font-size: toRem(16*1.8);
      -webkit-user-select: none;
      overflow: hidden;
      backface-visibility: hidden;
      transition: .2s;
      
      @descendent header {
        padding: toRem(15*1.8) 0 0;
      }
      
      @descendent content {
        padding: toRem(10*1.8) toRem(20*1.8) toRem(15*1.8);
        border-bottom: toRem(1*1.8) solid #ddd;
        min-height: toRem(36*1.8);
        position: relative;
      }
      
      @descendent input {
        padding-top: toRem(15*1.8);
        & input {
          border: toRem(1*1.8) solid #dedede;
          border-radius: toRem(5*1.8);
          padding: toRem(4*1.8) toRem(5*1.8);
          width: 100%;
          appearance: none;
          outline: none;
          box-sizing: border-box;
        }
        & input.invalid {
          border-color: #ff4949;
          &:focus {
            border-color: #ff4949;
          }
        }
      }
    
      @descendent errormsg {
        color: red;
        font-size: toRem(12*1.8);
        min-height: toRem(18*1.8);
        margin-top: toRem(2*1.8);
      }
      
      @descendent title {
        text-align: center;
        padding-left: 0;
        margin-bottom: 0;
        font-size: toRem(16*1.8);
        font-weight: bold;
        color: #333;
      }
      
      @descendent message {
        color: #999;
        margin: 0;
        text-align: center;
        line-height: toRem(36*1.8);
      }
      
      @descendent btns {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: toRem(40*1.8);
        line-height: toRem(40*1.8);
      }
    
      @descendent btn {
        font-size: toRem(30);
        line-height: toRem(35*1.8);
        display: block;
        background-color: #fff;
        flex: 1;
        margin: 0;
        border: 0;
  
        &:focus {
          outline: none;
        }
  
        &:active {
          background-color: #fff;
        }
      }
    
      @descendent cancel {
        width: 50%;
        border-right: toRem(1*1.8) solid #ddd;
        &:active {
          color: #26a2ff;
        }
      }
  
      @descendent confirm {
        color: #26a2ff;
        width: 50%;
        &:active {
         color: #26a2ff;
        }
      }
    }
  }

  .msgbox-bounce-enter {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.2);
  }
  .msgbox-bounce-leave-active {
    opacity: 0;
  }